<template>
  <!-- 流程图预览 -->
  <div class="mind">
    <div class="container" v-if="mermaidCode">
      <pre class="mermaid"
        >{{ mermaidCode }}
          </pre
      >
    </div>

    <!-- <div class="loading-text" v-if="!mermaidCode">流程图解析中,请稍后...</div>
      -->
    <!-- 如果 mermaidCode 为空且出现错误，显示错误提示 -->
    <div class="loading-text" v-if="!mermaidCode && errorText">{{ errorText }}</div>
    <div class="loading-text" v-if="!mermaidCode && !errorText">流程图解析中,请稍后...</div>
  </div>
</template>

<script setup lang="ts">
const emit: any = defineEmits(['getAiTranslate']);
import mermaid from 'mermaid'; //引用mermaid
import { onMounted, ref } from 'vue';
const mermaidCode = ref();

const abc = `
    graph TD
        A[开发软件汇总] --> B[Java]
        B --> C{由谁创建}
        C --> D{James Gosling及其团队}
        C --> E(1995年首次发布)
        F[面向对象的编程语言] --> G[广泛应用于企业级开发、移动开发、Web应用、分布式应用等多个领域]
        A --> H[Python]
        H --> I{由谁创建}
        I --> J(Guido van Rossum设计并发布)
        I --> K(1991年)
        L[高级、解释型、通用的编程语言] --> M[广泛应用于数据分析、人工智能、Web开发、自动化脚本、科学计算等多个领域]
        A --> N[C++]
        N --> O{由谁创建}
        O --> P(Bjarne Stroustrup开始开发于1979年)
        O --> Q(1985年首次发布)
        R[通用的编程语言] --> S[系统编程、游戏开发、嵌入式系统、图形渲染等领域]
        A --> T[C#]
        T --> U{由谁推出}
        U --> V(微软于2000年推出，作为.NET平台的一部分)
        V --> W[现代化的、面向对象的编程语言]
        W --> X[支持多种编程范式，包括OOP、函数式编程、事件驱动编程等]
        X --> Y[主要用于开发Windows应用程序、Web应用程序、游戏、移动应用等]
    `;

const abcd = `
graph TD
    A[笔记-转为word] --> B(3.15)
    C[笔记bug] --> D(3.18-3.19)
    E[熟悉培训系统] --> F(3.19-3.20)
    G[培训系统单点登录] --> H(3.21-3.22)
    I[培训系统-资质管理(后台和学员端)] --> J(3.25-3.29)
    K[培训-培训项目] --> L(4.1-4.3)
    M[培训-增加指派方式,添加角色,用户组,岗位] --> N(4.7-4.11)
    O[培训-培训任务] --> P(4.12，4.15-4.17)
    Q[考核任务] --> R(4.18-4.19 ，4.22-4.24)
    S[审批流程] --> T(4.25-4.26，4.28-4.30，5.6)
    U[问卷评分] --> V(5.7-5.11)
    W[跟踪数据] --> X(5.13-5.17)
    Y[学习资源的编辑和上传(基于文档知识库)] --> Z(5.20-5.24，5.27-5.31)
    AA[测试修改bug] --> AB(两周)
`;

const errorText = ref(''); // 存储错误信息
const retryCount = ref(0); // 记录失败的次数
const maxRetryCount = 5; // 最大重试次数
const initMermaidFunc = async (val: any) => {
  try {
    // 尝试解析 mermaid 文本
    if (await mermaid.parse(val)) {
      mermaidCode.value = `${val}`;
      setTimeout(() => {
        nextTick(() => {
          mermaid.initialize({ startOnLoad: false });
          mermaid.run({
            suppressErrors: true
          });
          mermaid.init();
        });
      }, 1000);

      console.log('解析成功');
      retryCount.value = 0; // 解析成功时重置计数器
    }
  } catch (error) {
    retryCount.value += 1; // 解析失败时增加重试次数

    // 如果达到最大重试次数，提示用户
    if (retryCount.value >= maxRetryCount) {
      console.log('解析失败，达到最大重试次数');
      mermaidCode.value = ''; // 清空 mermaidCode，避免显示错误的内容
      errorText.value = '文本内容无法解析...'; // 设置错误提示信息
      return;
    }

    emit('getAiTranslate'); // 调用外部接口重试
    console.log('解析失败，正在重试...');
  }
};

const initMermaidFunc00 = async (val: any) => {
  try {
    if (await mermaid.parse(val)) {
      mermaidCode.value = `${val}`;
      setTimeout(() => {
        nextTick(() => {
          mermaid.initialize({ startOnLoad: false });
          mermaid.run({
            suppressErrors: true
          });
          mermaid.init();
        });
      }, 1000);
      retryCount.value = 0; // 解析成功时重置计数器
      console.log('解析成功');
    }
  } catch (error) {
    retryCount.value += 1; // 解析失败时增加重试次数

    // 如果达到最大重试次数，提示用户
    if (retryCount.value >= maxRetryCount) {
      console.log('解析失败，达到最大重试次数');
      mermaidCode.value = ''; // 清空 mermaidCode，避免显示错误的内容
      //setErrorState(true); // 设置错误状态
      return;
    }
    emit('getAiTranslate');
    console.log('解析失败，正在重试...');
  }

  return;
};

onMounted(() => {});

defineExpose({
  initMermaidFunc
});
</script>

<style scoped lang="scss">
.mind {
  width: 100%;
  height: 100%;
  // display: flex;
  // flex-direction: column;
}

.loading-text {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
  font-size: 30px;
  color: #615ced;
  font-style: italic;
  animation: loading 1s infinite;
}

@keyframes loading {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

.svg-container {
  flex: 1;
  svg {
    width: 100%;
    height: 100%;
  }
}
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
.controls {
  margin-top: 10px;
}

.read-the-docs {
  color: #888;
}
</style>
